<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情 - 跨境进口电商</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;
        }
        .product-image {
            transition: transform 0.3s ease;
        }
        .product-image:hover {
            transform: scale(1.05);
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        .tab-button {
            border-bottom: 2px solid transparent;
            transition: all 0.3s ease;
        }
        .tab-button.active {
            border-bottom: 2px solid #8b5cf6;
            color: #8b5cf6;
        }
        .fade-in {
            animation: fadeIn 0.5s ease-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .slide-in {
            animation: slideIn 0.3s ease-out;
        }
        @keyframes slideIn {
            from { transform: translateX(100%); }
            to { transform: translateX(0); }
        }
        .dark-mode {
            background-color: #1a1a1a;
            color: #ffffff;
        }
        .dark-mode .bg-white {
            background-color: #2d2d2d;
        }
        .dark-mode .text-gray-900 {
            color: #ffffff;
        }
        .dark-mode .text-gray-600 {
            color: #d1d5db;
        }
        .dark-mode .border-gray-200 {
            border-color: #4b5563;
        }
        .dark-mode .bg-gray-50 {
            background-color: #374151;
        }
        .dark-mode .hover:bg-gray-50:hover {
            background-color: #4b5563;
        }
        .modal-overlay {
            backdrop-filter: blur(5px);
        }
        .quantity-btn {
            transition: all 0.2s ease;
        }
        .quantity-btn:hover {
            transform: scale(1.1);
        }
        .quantity-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }
        .image-gallery {
            position: relative;
            overflow: hidden;
        }
        .image-gallery img {
            transition: opacity 0.3s ease;
        }
        .thumbnail {
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        .thumbnail:hover, .thumbnail.active {
            border-color: #8b5cf6;
            transform: scale(1.05);
        }
        .badge {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
    </style>
</head>
<body class="bg-gray-50 transition-colors duration-300">
    <!-- 顶部导航栏 -->
    <nav class="bg-white shadow-lg sticky top-0 z-40">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <h1 class="text-2xl font-bold text-purple-600">全球购直播</h1>
                    </div>
                    <div class="hidden md:block ml-10">
                        <div class="flex items-baseline space-x-4">
                            <a href="../index.html" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">首页</a>
                            <a href="../overseas-live-center.html" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">直播中心</a>
                            <a href="../overseas-shopping.html" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">海外购商城</a>
                            <a href="../shopping-cart/index.html" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">购物车</a>
                        </div>
                    </div>
                </div>
                <div class="flex items-center space-x-4">
                    <!-- 主题切换 -->
                    <button id="theme-toggle" class="text-gray-600 hover:text-purple-600 p-2 rounded-full hover:bg-gray-100">
                        <i class="fas fa-moon text-xl"></i>
                    </button>
                    <!-- 购物车 -->
                    <button onclick="addToCart()" class="relative text-gray-600 hover:text-purple-600 p-2 rounded-full hover:bg-gray-100">
                        <i class="fas fa-shopping-cart text-xl"></i>
                        <span id="cart-count" class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">0</span>
                    </button>
                    <!-- 用户头像 -->
                    <div class="relative">
                        <button class="flex items-center space-x-2 text-gray-700 hover:text-purple-600">
                            <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="用户头像">
                            <span class="hidden md:block text-sm font-medium">用户</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- 商品图片区域 -->
            <div class="space-y-4">
                <!-- 主图 -->
                <div class="image-gallery bg-white rounded-lg shadow-lg p-4">
                    <img id="main-image" src="https://images.unsplash.com/photo-1586495777744-4413f21062fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="商品主图" class="w-full h-96 object-cover rounded-lg product-image">
                    <!-- 直播标签 -->
                    <div class="absolute top-4 left-4 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-medium badge">
                        <i class="fas fa-video mr-1"></i>直播中
                    </div>
                    <!-- 折扣标签 -->
                    <div class="absolute top-4 right-4 bg-yellow-500 text-white px-3 py-1 rounded-full text-sm font-medium">
                        限时8折
                    </div>
                </div>
                
                <!-- 缩略图 -->
                <div class="grid grid-cols-4 gap-2">
                    <div class="thumbnail active" onclick="changeImage(this, 'https://images.unsplash.com/photo-1586495777744-4413f21062fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80')">
                        <img src="https://images.unsplash.com/photo-1586495777744-4413f21062fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80" alt="缩略图1" class="w-full h-20 object-cover rounded-lg">
                    </div>
                    <div class="thumbnail" onclick="changeImage(this, 'https://images.unsplash.com/photo-1556228578-8c89e6adf883?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80')">
                        <img src="https://images.unsplash.com/photo-1556228578-8c89e6adf883?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80" alt="缩略图2" class="w-full h-20 object-cover rounded-lg">
                    </div>
                    <div class="thumbnail" onclick="changeImage(this, 'https://images.unsplash.com/photo-1572635196237-14b3f281503f?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80')">
                        <img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80" alt="缩略图3" class="w-full h-20 object-cover rounded-lg">
                    </div>
                    <div class="thumbnail" onclick="changeImage(this, 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80')">
                        <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80" alt="缩略图4" class="w-full h-20 object-cover rounded-lg">
                    </div>
                </div>
            </div>
            
            <!-- 商品信息区域 -->
            <div class="space-y-6">
                <!-- 基本信息 -->
                <div class="bg-white rounded-lg shadow-lg p-6 fade-in">
                    <h1 class="text-2xl font-bold text-gray-900 mb-2">SK-II 神仙水精华液</h1>
                    <p class="text-gray-600 mb-4">230ml 日本原装进口 | 抗老修复 | 补水保湿</p>
                    
                    <!-- 价格信息 -->
                    <div class="flex items-center space-x-4 mb-4">
                        <span class="text-3xl font-bold text-red-600">¥1,299</span>
                        <span class="text-lg text-gray-500 line-through">¥1,599</span>
                        <span class="bg-red-500 text-white px-2 py-1 rounded text-sm">限时8折</span>
                    </div>
                    
                    <!-- 直播专属优惠 -->
                    <div class="bg-purple-50 border border-purple-200 rounded-lg p-4 mb-4">
                        <div class="flex items-center space-x-2 mb-2">
                            <i class="fas fa-video text-purple-600"></i>
                            <span class="font-semibold text-purple-900">直播专属优惠</span>
                        </div>
                        <div class="text-sm text-purple-700">
                            <p>• 直播间下单立减300元</p>
                            <p>• 赠送价值199元小样套装</p>
                            <p>• 包邮包税，7-15天送达</p>
                        </div>
                        <div class="mt-2 text-xs text-purple-600">
                            <i class="fas fa-clock mr-1"></i>
                            优惠剩余时间：<span id="countdown" class="font-bold">23:59:59</span>
                        </div>
                    </div>
                    
                    <!-- 规格选择 -->
                    <div class="mb-4">
                        <h3 class="text-lg font-semibold text-gray-900 mb-3">规格选择</h3>
                        <div class="grid grid-cols-3 gap-3">
                            <button onclick="selectSpec(this, '230ml')" class="spec-btn border-2 border-purple-600 text-purple-600 px-4 py-2 rounded-lg font-medium">230ml</button>
                            <button onclick="selectSpec(this, '330ml')" class="spec-btn border-2 border-gray-300 text-gray-700 px-4 py-2 rounded-lg font-medium hover:border-purple-600">330ml</button>
                            <button onclick="selectSpec(this, '500ml')" class="spec-btn border-2 border-gray-300 text-gray-700 px-4 py-2 rounded-lg font-medium hover:border-purple-600">500ml</button>
                        </div>
                    </div>
                    
                    <!-- 数量选择 -->
                    <div class="mb-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-3">数量</h3>
                        <div class="flex items-center space-x-3">
                            <button onclick="changeQuantity(-1)" class="quantity-btn w-10 h-10 border border-gray-300 rounded-lg flex items-center justify-center hover:bg-gray-50">
                                <i class="fas fa-minus"></i>
                            </button>
                            <input type="number" id="quantity" value="1" min="1" max="10" class="w-16 h-10 text-center border border-gray-300 rounded-lg font-semibold">
                            <button onclick="changeQuantity(1)" class="quantity-btn w-10 h-10 border border-gray-300 rounded-lg flex items-center justify-center hover:bg-gray-50">
                                <i class="fas fa-plus"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 操作按钮 -->
                    <div class="flex space-x-4">
                        <button onclick="addToCart()" class="flex-1 bg-purple-600 text-white py-3 rounded-lg hover:bg-purple-700 transition-colors font-medium">
                            <i class="fas fa-shopping-cart mr-2"></i>加入购物车
                        </button>
                        <button onclick="buyNow()" class="flex-1 bg-red-600 text-white py-3 rounded-lg hover:bg-red-700 transition-colors font-medium">
                            <i class="fas fa-bolt mr-2"></i>立即购买
                        </button>
                    </div>
                </div>
                
                <!-- 服务保障 -->
                <div class="bg-white rounded-lg shadow-lg p-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">服务保障</h3>
                    <div class="grid grid-cols-2 gap-4">
                        <div class="flex items-center space-x-2">
                            <i class="fas fa-shield-alt text-green-500"></i>
                            <span class="text-sm text-gray-700">正品保障</span>
                        </div>
                        <div class="flex items-center space-x-2">
                            <i class="fas fa-shipping-fast text-blue-500"></i>
                            <span class="text-sm text-gray-700">包邮包税</span>
                        </div>
                        <div class="flex items-center space-x-2">
                            <i class="fas fa-clock text-orange-500"></i>
                            <span class="text-sm text-gray-700">7天退换</span>
                        </div>
                        <div class="flex items-center space-x-2">
                            <i class="fas fa-headset text-purple-500"></i>
                            <span class="text-sm text-gray-700">24小时客服</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 商品详情标签页 -->
        <div class="bg-white rounded-lg shadow-lg mt-8">
            <div class="border-b border-gray-200">
                <nav class="flex space-x-8 px-6">
                    <button onclick="showTab('details')" class="tab-button active py-4 px-2 font-medium text-gray-900">商品详情</button>
                    <button onclick="showTab('specifications')" class="tab-button py-4 px-2 font-medium text-gray-600 hover:text-gray-900">规格参数</button>
                    <button onclick="showTab('reviews')" class="tab-button py-4 px-2 font-medium text-gray-600 hover:text-gray-900">用户评价</button>
                    <button onclick="showTab('crossborder')" class="tab-button py-4 px-2 font-medium text-gray-600 hover:text-gray-900">跨境须知</button>
                </nav>
            </div>
            
            <div class="p-6">
                <!-- 商品详情 -->
                <div id="details" class="tab-content active">
                    <div class="space-y-6">
                        <div>
                            <h4 class="text-lg font-semibold text-gray-900 mb-3">产品功效</h4>
                            <ul class="list-disc list-inside text-gray-700 space-y-2">
                                <li>深层补水保湿，改善肌肤干燥问题</li>
                                <li>淡化细纹，提升肌肤紧致度</li>
                                <li>均匀肤色，提亮肌肤光泽</li>
                                <li>改善肌肤纹理，使肌肤更加细腻光滑</li>
                                <li>增强肌肤屏障功能，提高肌肤抵抗力</li>
                            </ul>
                        </div>
                        
                        <div>
                            <h4 class="text-lg font-semibold text-gray-900 mb-3">使用方法</h4>
                            <ol class="list-decimal list-inside text-gray-700 space-y-2">
                                <li>洁面后，取适量产品于掌心</li>
                                <li>轻拍于面部和颈部，直至完全吸收</li>
                                <li>建议早晚使用，配合按摩效果更佳</li>
                                <li>可搭配同系列其他产品使用</li>
                            </ol>
                        </div>
                        
                        <div>
                            <h4 class="text-lg font-semibold text-gray-900 mb-3">成分说明</h4>
                            <p class="text-gray-700">蕴含SK-II独家PITERA™精华，富含多种维生素、矿物质、氨基酸和有机酸，能够深入肌肤底层，从根本上改善肌肤问题。</p>
                        </div>
                        
                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                            <h4 class="text-lg font-semibold text-blue-900 mb-2">直播专属福利</h4>
                            <p class="text-blue-700">现在下单即可获得价值199元的小样套装，包含神仙水30ml+洁面乳20g+面霜15g，数量有限，送完即止！</p>
                        </div>
                    </div>
                </div>
                
                <!-- 规格参数 -->
                <div id="specifications" class="tab-content">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <h4 class="text-lg font-semibold text-gray-900 mb-3">基本信息</h4>
                            <table class="w-full text-sm">
                                <tr class="border-b border-gray-200">
                                    <td class="py-2 text-gray-600">品牌</td>
                                    <td class="py-2 font-medium">SK-II</td>
                                </tr>
                                <tr class="border-b border-gray-200">
                                    <td class="py-2 text-gray-600">规格</td>
                                    <td class="py-2 font-medium">230ml</td>
                                </tr>
                                <tr class="border-b border-gray-200">
                                    <td class="py-2 text-gray-600">产地</td>
                                    <td class="py-2 font-medium">日本</td>
                                </tr>
                                <tr class="border-b border-gray-200">
                                    <td class="py-2 text-gray-600">保质期</td>
                                    <td class="py-2 font-medium">3年</td>
                                </tr>
                            </table>
                        </div>
                        
                        <div>
                            <h4 class="text-lg font-semibold text-gray-900 mb-3">包装信息</h4>
                            <table class="w-full text-sm">
                                <tr class="border-b border-gray-200">
                                    <td class="py-2 text-gray-600">包装类型</td>
                                    <td class="py-2 font-medium">瓶装</td>
                                </tr>
                                <tr class="border-b border-gray-200">
                                    <td class="py-2 text-gray-600">包装规格</td>
                                    <td class="py-2 font-medium">1瓶/盒</td>
                                </tr>
                                <tr class="border-b border-gray-200">
                                    <td class="py-2 text-gray-600">外盒尺寸</td>
                                    <td class="py-2 font-medium">15×15×20cm</td>
                                </tr>
                                <tr class="border-b border-gray-200">
                                    <td class="py-2 text-gray-600">净重</td>
                                    <td class="py-2 font-medium">280g</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                
                <!-- 用户评价 -->
                <div id="reviews" class="tab-content">
                    <div class="space-y-6">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-4">
                                <div class="text-2xl font-bold text-gray-900">4.8</div>
                                <div>
                                    <div class="flex items-center space-x-1">
                                        <i class="fas fa-star text-yellow-400"></i>
                                        <i class="fas fa-star text-yellow-400"></i>
                                        <i class="fas fa-star text-yellow-400"></i>
                                        <i class="fas fa-star text-yellow-400"></i>
                                        <i class="fas fa-star text-yellow-400"></i>
                                    </div>
                                    <p class="text-sm text-gray-600">基于1,234条评价</p>
                                </div>
                            </div>
                            <button class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors">
                                <i class="fas fa-pen mr-2"></i>写评价
                            </button>
                        </div>
                        
                        <div class="space-y-4">
                            <div class="border-b border-gray-200 pb-4">
                                <div class="flex items-center space-x-3 mb-2">
                                    <img src="https://images.unsplash.com/photo-1494790108755-2616b612b5bc?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=40&q=80" alt="用户头像" class="w-10 h-10 rounded-full">
                                    <div>
                                        <p class="font-medium text-gray-900">小美</p>
                                        <div class="flex items-center space-x-1">
                                            <i class="fas fa-star text-yellow-400 text-xs"></i>
                                            <i class="fas fa-star text-yellow-400 text-xs"></i>
                                            <i class="fas fa-star text-yellow-400 text-xs"></i>
                                            <i class="fas fa-star text-yellow-400 text-xs"></i>
                                            <i class="fas fa-star text-yellow-400 text-xs"></i>
                                        </div>
                                    </div>
                                </div>
                                <p class="text-gray-700 mb-2">用了一个月，肌肤状态明显改善，毛孔变小了，肤色也提亮了很多，真的很不错！</p>
                                <p class="text-xs text-gray-500">2024年11月15日</p>
                            </div>
                            
                            <div class="border-b border-gray-200 pb-4">
                                <div class="flex items-center space-x-3 mb-2">
                                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=40&q=80" alt="用户头像" class="w-10 h-10 rounded-full">
                                    <div>
                                        <p class="font-medium text-gray-900">小李</p>
                                        <div class="flex items-center space-x-1">
                                            <i class="fas fa-star text-yellow-400 text-xs"></i>
                                            <i class="fas fa-star text-yellow-400 text-xs"></i>
                                            <i class="fas fa-star text-yellow-400 text-xs"></i>
                                            <i class="fas fa-star text-yellow-400 text-xs"></i>
                                            <i class="far fa-star text-gray-300 text-xs"></i>
                                        </div>
                                    </div>
                                </div>
                                <p class="text-gray-700 mb-2">包装很精美，是正品，用了一周感觉肌肤水润了不少，期待更好的效果。</p>
                                <p class="text-xs text-gray-500">2024年11月10日</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 跨境须知 -->
                <div id="crossborder" class="tab-content">
                    <div class="space-y-6">
                        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                            <div class="flex items-center space-x-2 mb-2">
                                <i class="fas fa-exclamation-triangle text-yellow-600"></i>
                                <h4 class="text-lg font-semibold text-yellow-900">重要提醒</h4>
                            </div>
                            <p class="text-yellow-700 mb-2">根据海关规定，跨境商品购买需遵守以下政策：</p>
                            <ul class="list-disc list-inside text-yellow-700 space-y-1">
                                <li>单笔订单限额5,000元人民币</li>
                                <li>年度个人额度26,000元人民币</li>
                                <li>需提供真实身份信息用于清关</li>
                                <li>商品可能产生关税，已包含在价格中</li>
                            </ul>
                        </div>
                        
                        <div>
                            <h4 class="text-lg font-semibold text-gray-900 mb-3">购买流程</h4>
                            <ol class="list-decimal list-inside text-gray-700 space-y-2">
                                <li>选择商品并确认订单信息</li>
                                <li>填写收货地址和身份信息</li>
                                <li>选择支付方式并完成支付</li>
                                <li>等待海关清关（1-3个工作日）</li>
                                <li>商品发货，7-15个工作日送达</li>
                            </ol>
                        </div>
                        
                        <div>
                            <h4 class="text-lg font-semibold text-gray-900 mb-3">退换货政策</h4>
                            <p class="text-gray-700 mb-2">跨境商品支持7天无理由退货，但需满足以下条件：</p>
                            <ul class="list-disc list-inside text-gray-700 space-y-1">
                                <li>商品未开封使用，保持原包装完整</li>
                                <li>需提供退货原因和相关证明</li>
                                <li>退货运费由买家承担</li>
                                <li>已缴纳的关税不予退还</li>
                            </ul>
                        </div>
                        
                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                            <div class="flex items-center space-x-2 mb-2">
                                <i class="fas fa-info-circle text-blue-600"></i>
                                <h4 class="text-lg font-semibold text-blue-900">客服支持</h4>
                            </div>
                            <p class="text-blue-700">如有任何疑问，请联系我们的客服团队。我们提供24小时在线客服，随时为您解答跨境购买相关问题。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 推荐商品 -->
        <div class="bg-white rounded-lg shadow-lg mt-8 p-6">
            <h3 class="text-xl font-bold text-gray-900 mb-6">为您推荐</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="product-card bg-gray-50 rounded-lg p-4 cursor-pointer hover:shadow-lg transition-shadow">
                    <img src="https://images.unsplash.com/photo-1556228578-8c89e6adf883?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="商品" class="w-full h-32 object-cover rounded-lg mb-3">
                    <h4 class="font-semibold text-gray-900 mb-1">海蓝之谜面霜</h4>
                    <p class="text-sm text-gray-600 mb-2">30ml 经典修复</p>
                    <div class="flex items-center justify-between">
                        <span class="text-lg font-bold text-red-600">¥1,899</span>
                        <span class="text-sm text-gray-500 line-through">¥2,299</span>
                    </div>
                </div>
                
                <div class="product-card bg-gray-50 rounded-lg p-4 cursor-pointer hover:shadow-lg transition-shadow">
                    <img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="商品" class="w-full h-32 object-cover rounded-lg mb-3">
                    <h4 class="font-semibold text-gray-900 mb-1">雅诗兰黛小棕瓶</h4>
                    <p class="text-sm text-gray-600 mb-2">50ml 抗老精华</p>
                    <div class="flex items-center justify-between">
                        <span class="text-lg font-bold text-red-600">¥999</span>
                        <span class="text-sm text-gray-500 line-through">¥1,299</span>
                    </div>
                </div>
                
                <div class="product-card bg-gray-50 rounded-lg p-4 cursor-pointer hover:shadow-lg transition-shadow">
                    <img src="https://images.unsplash.com/photo-1586495777744-4413f21062fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="商品" class="w-full h-32 object-cover rounded-lg mb-3">
                    <h4 class="font-semibold text-gray-900 mb-1">资生堂红腰子</h4>
                    <p class="text-sm text-gray-600 mb-2">50ml 抗老修复</p>
                    <div class="flex items-center justify-between">
                        <span class="text-lg font-bold text-red-600">¥899</span>
                        <span class="text-sm text-gray-500 line-through">¥1,199</span>
                    </div>
                </div>
                
                <div class="product-card bg-gray-50 rounded-lg p-4 cursor-pointer hover:shadow-lg transition-shadow">
                    <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="商品" class="w-full h-32 object-cover rounded-lg mb-3">
                    <h4 class="font-semibold text-gray-900 mb-1">CPB钻石精华</h4>
                    <p class="text-sm text-gray-600 mb-2">30ml 贵妇级护肤</p>
                    <div class="flex items-center justify-between">
                        <span class="text-lg font-bold text-red-600">¥2,599</span>
                        <span class="text-sm text-gray-500 line-through">¥2,999</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 购物车弹窗 -->
    <div id="cart-modal" class="fixed inset-0 bg-black bg-opacity-50 modal-overlay hidden z-50">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="bg-white rounded-lg shadow-xl max-w-md w-full slide-in">
                <div class="flex items-center justify-between p-6 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900">商品已加入购物车</h3>
                    <button onclick="closeCartModal()" class="text-gray-400 hover:text-gray-600">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="p-6">
                    <div class="flex items-center space-x-4 mb-4">
                        <img src="https://images.unsplash.com/photo-1586495777744-4413f21062fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=80&q=80" alt="商品" class="w-16 h-16 object-cover rounded-lg">
                        <div class="flex-1">
                            <h4 class="font-semibold text-gray-900">SK-II 神仙水精华液</h4>
                            <p class="text-sm text-gray-600">230ml</p>
                            <p class="text-lg font-bold text-red-600">¥1,299</p>
                        </div>
                    </div>
                    <div class="flex space-x-4">
                        <button onclick="continueShopping()" class="flex-1 border border-gray-300 text-gray-700 py-2 rounded-lg hover:bg-gray-50 transition-colors">
                            继续购物
                        </button>
                        <button onclick="goToCart()" class="flex-1 bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition-colors">
                            查看购物车
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 主题切换功能
        const themeToggle = document.getElementById('theme-toggle');
        const body = document.body;
        
        // 检查系统主题偏好
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            body.classList.add('dark-mode');
            themeToggle.innerHTML = '<i class="fas fa-sun text-xl"></i>';
        }
        
        themeToggle.addEventListener('click', () => {
            body.classList.toggle('dark-mode');
            if (body.classList.contains('dark-mode')) {
                themeToggle.innerHTML = '<i class="fas fa-sun text-xl"></i>';
            } else {
                themeToggle.innerHTML = '<i class="fas fa-moon text-xl"></i>';
            }
        });
        
        // 图片切换
        function changeImage(element, imageSrc) {
            document.querySelectorAll('.thumbnail').forEach(thumb => {
                thumb.classList.remove('active');
            });
            element.classList.add('active');
            document.getElementById('main-image').src = imageSrc;
        }
        
        // 规格选择
        function selectSpec(button, spec) {
            document.querySelectorAll('.spec-btn').forEach(btn => {
                btn.classList.remove('border-purple-600', 'text-purple-600');
                btn.classList.add('border-gray-300', 'text-gray-700');
            });
            button.classList.remove('border-gray-300', 'text-gray-700');
            button.classList.add('border-purple-600', 'text-purple-600');
        }
        
        // 数量调整
        function changeQuantity(delta) {
            const quantityInput = document.getElementById('quantity');
            let currentValue = parseInt(quantityInput.value);
            let newValue = currentValue + delta;
            
            if (newValue >= 1 && newValue <= 10) {
                quantityInput.value = newValue;
            }
        }
        
        // 标签页切换
        function showTab(tabName) {
            // 隐藏所有标签页内容
            document.querySelectorAll('.tab-content').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // 移除所有按钮的激活状态
            document.querySelectorAll('.tab-button').forEach(btn => {
                btn.classList.remove('active');
                btn.classList.remove('text-gray-900');
                btn.classList.add('text-gray-600');
            });
            
            // 显示选中的标签页
            document.getElementById(tabName).classList.add('active');
            
            // 激活对应的按钮
            event.target.classList.add('active');
            event.target.classList.add('text-gray-900');
            event.target.classList.remove('text-gray-600');
        }
        
        // 添加到购物车
        function addToCart() {
            const cartCount = document.getElementById('cart-count');
            const currentCount = parseInt(cartCount.textContent);
            const quantity = parseInt(document.getElementById('quantity').value);
            cartCount.textContent = currentCount + quantity;
            
            // 显示购物车弹窗
            document.getElementById('cart-modal').classList.remove('hidden');
        }
        
        // 立即购买
        function buyNow() {
            const quantity = document.getElementById('quantity').value;
            showNotification(`正在跳转到结算页面...数量：${quantity}`);
            setTimeout(() => {
                window.location.href = '../shopping-cart/index.html';
            }, 1000);
        }
        
        // 关闭购物车弹窗
        function closeCartModal() {
            document.getElementById('cart-modal').classList.add('hidden');
        }
        
        // 继续购物
        function continueShopping() {
            closeCartModal();
            showNotification('继续浏览商品');
        }
        
        // 跳转到购物车
        function goToCart() {
            window.location.href = '../shopping-cart/index.html';
        }
        
        // 显示通知
        function showNotification(message) {
            const notification = document.createElement('div');
            notification.className = 'fixed top-20 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
            notification.innerHTML = `
                <div class="flex items-center space-x-2">
                    <i class="fas fa-check-circle"></i>
                    <span>${message}</span>
                </div>
            `;
            document.body.appendChild(notification);
            
            setTimeout(() => {
                notification.remove();
            }, 3000);
        }
        
        // 倒计时功能
        function updateCountdown() {
            const countdownElement = document.getElementById('countdown');
            const now = new Date();
            const endOfDay = new Date(now);
            endOfDay.setHours(23, 59, 59, 999);
            
            const timeLeft = endOfDay - now;
            const hours = Math.floor(timeLeft / (1000 * 60 * 60));
            const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
            
            countdownElement.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        }
        
        // 每秒更新倒计时
        setInterval(updateCountdown, 1000);
        updateCountdown(); // 立即更新一次
        
        // 推荐商品点击事件
        document.querySelectorAll('.product-card').forEach(card => {
            card.addEventListener('click', () => {
                showNotification('正在查看商品详情...');
            });
        });
        
        // 点击弹窗外部关闭弹窗
        document.getElementById('cart-modal').addEventListener('click', (e) => {
            if (e.target === e.currentTarget) {
                closeCartModal();
            }
        });
    </script>
</body>
</html>